import { Row, Col, Form, Input, Button, Modal, Select, InputNumber, DatePicker } from 'antd';

import React from 'react';
import { connect } from 'dva';

const { Option } = Select;

const EditForm = Form.create()(
  class CreateForm extends React.Component {
    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
      };
    }

    handleConfirm = (props: any) => {};

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;
      // const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };

      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };

      const layout = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };

      const footer = [];
      footer.push(
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );

      footer.push(
        // @ts-ignore
        // eslint-disable-next-line react/jsx-no-bind
        <Button
          key="submit"
          size="large"
          loading={this.props.loading}
          onClick={this.handleConfirm.bind(this)}
        >
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="海运商品维护"
          // @ts-ignore
          visible={this.state.open}
          width={800}
          footer={footer}
          onCancel={this.handleCancel}
        >
          <Form {...layout}>
            <div>
              <Row>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="供应商代码" hasFeedback>
                    {getFieldDecorator('supplierId', {
                      rules: [
                        {
                          required: true,
                          message: '请选择供应商代码',
                        },
                      ],
                      initialValue: '',
                    })(
                      <Select>
                        <Option value="1">乐达</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="航线代码" hasFeedback>
                    {getFieldDecorator('airlineId', {
                      rules: [
                        {
                          required: true,
                          message: '请选择航线代码',
                        },
                      ],
                      initialValue: '',
                    })(
                      <Select>
                        <Option value="1">B5021521</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="船公司代码" hasFeedback>
                    {getFieldDecorator('berthingId', {
                      rules: [
                        {
                          required: true,
                          message: '请选择船公司代码',
                        },
                      ],
                      initialValue: '',
                    })(
                      <Select>
                        <Option value="1">021515</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="起运港" hasFeedback>
                    {getFieldDecorator('loadingPort', {
                      rules: [
                        {
                          required: true,
                          message: '请选择起运港',
                        },
                      ],
                      initialValue: '',
                    })(
                      <Select>
                        <Option value="1">南沙</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="目的港" hasFeedback>
                    {getFieldDecorator('destinationPort', {
                      rules: [
                        {
                          required: true,
                          message: '请选择目的港',
                        },
                      ],
                      initialValue: '',
                    })(
                      <Select>
                        <Option value="1">纽约</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="航程(天数)" hasFeedback>
                    {getFieldDecorator('sail', {
                      rules: [
                        {
                          required: true,
                          message: '请输入航程',
                        },
                      ],
                      initialValue: '',
                    })(<InputNumber min={0} max={99999999999999} style={{ width: '100%' }} />)}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="船期" hasFeedback>
                    {getFieldDecorator('cutOff', {
                      rules: [
                        {
                          required: true,
                          message: '请选择船期',
                        },
                      ],
                      initialValue: '',
                    })(<Input maxLength={30} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="是否中转" hasFeedback>
                    {getFieldDecorator('transit', {
                      rules: [
                        {
                          required: true,
                          message: '请选择是否中转',
                        },
                      ],
                      initialValue: '',
                    })(
                      <Select>
                        <Select.Option value="1">是</Select.Option>
                        <Select.Option value="2">否</Select.Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="中转港" hasFeedback>
                    {getFieldDecorator('transitPort', {
                      rules: [
                        {
                          required: '请选择中转港',
                        },
                      ],
                      initialValue: '',
                    })(
                      <Select>
                        <Option value="1">圣地亚哥</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="20GP费用" hasFeedback>
                    {getFieldDecorator('fee20gp', {
                      rules: [
                        {
                          required: true,
                          message: '请输入20GP费用',
                        },
                      ],
                      initialValue: '',
                    })(<InputNumber max={99999999999999} style={{ width: '100%' }} />)}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="40GP费用" hasFeedback>
                    {getFieldDecorator('fee40gp', {
                      rules: [
                        {
                          required: true,
                          message: '请输入40GP费用',
                        },
                      ],
                      initialValue: '',
                    })(<InputNumber max={99999999999999} style={{ width: '100%' }} />)}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="40HQ费用" hasFeedback>
                    {getFieldDecorator('fee40hq', {
                      rules: [
                        {
                          required: true,
                          message: '请输入40HQ费用',
                        },
                      ],
                      initialValue: '',
                    })(<InputNumber max={99999999999999} style={{ width: '100%' }} />)}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="有效开始时间" hasFeedback>
                    {getFieldDecorator('begindate', {
                      rules: [
                        {
                          required: true,
                          message: '请选择有效开始时间',
                        },
                      ],
                      initialValue: '',
                    })(
                      <DatePicker
                        style={{ width: '100%' }}
                        showTime={{ format: 'YYYY-MM-DD' }}
                        format="YYYY-MM-DD"
                        placeholder="请选择有效开始时间"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item {...formItemLayout} label="有效结束时间" hasFeedback>
                    {getFieldDecorator('enddate', {
                      rules: [
                        {
                          required: true,
                          message: '请选择有效结束时间',
                        },
                      ],
                      initialValue: '',
                    })(
                      <DatePicker
                        style={{ width: '100%' }}
                        showTime={{ format: 'YYYY-MM-DD' }}
                        format="YYYY-MM-DD"
                        placeholder="请选择有效结束时间"
                      />,
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Form.Item {...layout} label="特价船期" hasFeedback>
                    {getFieldDecorator('specialShipPeriod', {
                      rules: [
                        {
                          required: false,
                          message: '请输入特价船期',
                        },
                      ],
                      initialValue: '',
                    })(<Input maxLength={100} />)}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Form.Item {...layout} label="备注" hasFeedback>
                    {getFieldDecorator('memo', {
                      rules: [
                        {
                          required: false,
                          message: '请输入备注',
                        },
                      ],
                      initialValue: '',
                    })(<Input.TextArea maxLength={300} autosize />)}
                  </Form.Item>
                </Col>
              </Row>
            </div>
          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.creditFinance,
  };
}

export default connect(mapStateToProps)(EditForm);
